import React from "react";

import { StyleSheet, Text, View } from "react-native";
import PropTypes from "prop-types";
import {
  Color, ScreenWidth, FontSize, scale,
} from "../../common";

const StatusItem = props => {
  const { text, active, logonText } = props;

  return (
    <View style={styles.container}>
      <View style={styles.logoContainer}>
        <View style={active ? styles.logoBgActive : styles.logoBgDefault}>
          <Text style={active ? styles.logoTextActive : styles.logoTextDefault}>{logonText}</Text>
        </View>
      </View>
      <Text style={active ? styles.textActive : styles.textDefault}>{text}</Text>
    </View>
  );
};

StatusItem.propTypes = {
  text: PropTypes.string,
  active: PropTypes.bool,
};
StatusItem.defaultProps = {
  text: "",
  active: false,
};

const styles = StyleSheet.create({
  container: {
    width: ScreenWidth / 4,
    justifyContent: "center",
    alignItems: "center",
    zIndex: 2,
  },
  logoContainer: {
    width: scale * 32,
    height: scale * 32,
    justifyContent: "center",
    alignItems: "center",
  },
  textActive: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_title,
    marginTop: scale * 10,
  },
  textDefault: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_assist,
    marginTop: scale * 10,
  },
  logoBgActive: {
    width: scale * 32,
    height: scale * 32,
    borderRadius: scale * 16,
    borderWidth: 0,
    backgroundColor: Color.tab_yellow,
    justifyContent: "center",
    alignItems: "center",
  },
  logoBgDefault: {
    width: scale * 24,
    height: scale * 24,
    borderRadius: scale * 12,
    borderWidth: 0,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F6F7F9",
  },
  logoTextActive: {
    fontSize: FontSize.SIZE_18,
    color: Color.white,
  },
  logoTextDefault: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_assist,
  },
});

export default StatusItem;
